<template>
	<div class="app"><!--只能有一个根组件-->
		<keep-alive><!--组件只创建一次 缓存-->
			<router-view v-if="$route.meta.keepAlive && isRouterAlive"></router-view><!--路由占位符-->
		</keep-alive>
		<router-view v-if="!$route.meta.keepAlive && isRouterAlive"></router-view>
	</div>
</template>

<script type="text/ecmascript-6">
	export default {
	    name: 'App',
		provide(){//父组件传子组件
	        return {
	            reload:this.reload
	        }
		},
		data(){
	        return {
	            isRouterAlive:true //控制刷新
	        }
		},
		methods:{
	        reload(){//调用函数控制刷新
	            this.isRouterAlive = false;
	            this.$nextTick(function(){
		            this.isRouterAlive = true;
                })
	        }
		}
	}
</script>

<style lang="stylus" rel="stylesheet/stylus">
	@import "./assets/reset.css";
	body
		.message
			z-index 99999 !important
			background-color rgba(0,0,0,0.6)
			top 50% !important
			color #FFFFFF
			font-size .56rem
			width 3rem
			height 2rem
			flex-direction column
			border-radius .3rem
			p
				font-size .26rem
				margin-top .3rem
	.app
		width 100%
		height 100%
</style>
